<script setup>
import { onMounted, ref, getCurrentInstance,onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import flvjs from 'flv.js';
const { proxy } = getCurrentInstance();

const baseHost="http://172.16.2.33:8080";
var dataList = ref([]);
var currentUrl = ref("");
const flvPlayer = ref(null);
var dialogVideoVisible = ref(false);

onMounted(() => {
    loadList();
    setInterval(loadList, 60000);
})

onUnmounted(() => {
    destroy();
});

const createVideo = () => {
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        flvPlayer.value = flvjs.createPlayer(
            {
                type: 'flv',
                url: currentUrl.value,
                isLive: true,
                hasAudio: false,
            }
        );
        flvPlayer.value.attachMediaElement(videoElement);
        flvPlayer.value.load();
        flvPlayer.value.on('error', () => {
            console.log(`视频加载失败，请稍候重试！`);
            return false;
        });
    }
};

const destroy = () => {
    try {
        flvPlayer.value.pause(); 
        flvPlayer.value.unload(); 
        flvPlayer.value.detachMediaElement(); 
        flvPlayer.value.destroy();
        flvPlayer.value = null;
    } catch (error) {
    }
};

async function loadList() {
    proxy.axios.get('/media/v1/streams/').then((ret) => {
        if (ret.data.code == 0) {
            dataList.value.length = 0;
            //console.log(ret.data);
            proxy.lodash(ret.data.streams).forEach((v) => {
                dataList.value.push(v);
            })
        }
        else {
            ElMessage({
                message: "在线视频为空",
                type: "success"
            })
        }
    }).catch((error) => {
        ElMessage({
            message: error.message,
            type: "error"
        })
    })
}

function getMediaInfo(row) {
    return `${row.video.codec}/${row.video.profile}/${row.video.level}`
}

function handleEdit(index, row) {
    //http://172.16.2.33:8080/live/34020000001320000001.flv
    // rtmp://127.0.0.1/live"
    // "/live/34020000001320000001"
    currentUrl.value =`${baseHost}${row.url}.flv`;
    //currentUrl.value =`${row.url}`;
    dialogVideoVisible.value=true;
}

function openedVideo() {
    createVideo();
    setTimeout(function () {
        flvPlayer.value.play();
    }, 500);
}

function closeVideo() {
    dialogVideoVisible.value = false;
    destroy();
}

</script>

<template>
    <el-page-header title="在线视频" icon="">

        <div>
            <el-table class="tableClass" :data="dataList" style="width: 100%" :default-expand-all="true" border
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :row-style="{ height: '50px' }">
                <el-table-column type="index" width="45"></el-table-column>
                <el-table-column prop="name" label="视频流名称"> </el-table-column>
                <el-table-column prop="tcUrl" label="TcUrl" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="url" label="Url" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="clients" label="在线人数" width="90"> </el-table-column>
                <el-table-column prop="frames" label="帧数" width="100" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="video.width" label="宽" width="80"> </el-table-column>
                <el-table-column prop="video.height" label="高" width="80"> </el-table-column>

                <el-table-column prop="send_bytes" label="出口流量" width="130" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="recv_bytes" label="入口流量" width="130" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column label="视频信息">
                    <template #default="scope">
                        <span v-text="getMediaInfo(scope.row)"></span>
                    </template>
                </el-table-column>

                <el-table-column prop="live_ms" label="日志时间"> </el-table-column>
                <el-table-column label="操作" width="80">
                    <template #default="scope">

                        <el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)">
                            <el-icon>
                                <VideoCamera />
                            </el-icon>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogVideoVisible" @opened="openedVideo" @close="closeVideo" title="在线视频"
                width="830">
                <div class="videoBox">
                    <video id="videoElement" controls autoplay muted
                        style="width: 100%; height: 100%; object-fit: fill"></video>
                </div>
            </el-dialog>
    </el-page-header>
</template>


<style scoped></style>